<!-- 组件 -->
<template>
  <div>
    <div class="weather" v-if="isShow">
      <div class="weather-content" v-if="forecast">
        <!-- 天气详情 -->
        <div class="today-weather-info">
          <div class="weather-info-top">
            <div>
              <span style="user-select: text;">{{ cityInfo.province }}>{{ cityInfo.city }}>{{ cityInfo.county }} </span>
              <span @click="switchAddress" style="cursor: default;">[切换]</span>
              <div class="weather-city-select" v-show="isSwitch">
                <city-select @citySelectResult="citySelectResult" :city="cityList"></city-select>
              </div>
            </div>
            <p class="info-date">{{ forecast[currentIndex].date }} {{ forecast[currentIndex].week }}</p>
          </div>
          <div class="weather-info-botom">
            <div class="weather-info-left">
              <div class="info-wendu">
                <p>
                  <span v-show="currentIndex == 0">{{ forecast[currentIndex].wendu }}</span>
                  <span v-show="currentIndex != 0">
                    <span>{{ forecast[currentIndex].low }}</span>
                    <span>&nbsp;&sim;&nbsp;</span>
                    <span>{{ forecast[currentIndex].high }}</span>
                  </span>
                  <span style="font-size: 16px;vertical-align: super;margin-left: 2px;">℃</span>
                </p>
              </div>
              <div>
                <h4 class="info-type">
                  <span>{{ forecast[currentIndex].type }} </span>
                  <weather-aqi :aqi="forecast[currentIndex].aqi"></weather-aqi>
                </h4>
                <p class="info-wind">{{ forecast[currentIndex].wind }}</p>
              </div>
            </div>
            <div class="weather-info-right" v-show="currentIndex == 0">
              <p class="info-time">在{{ showHour12Time }}</p>
            </div>
          </div>
        </div>
        <!-- 未来天气 -->
        <div class="future-weather-list">
          <ul class="weather-list">
            <li
              v-for="(item, index) in forecast"
              :key="index"
              @mouseenter="mouseenterWeatherItem(index)"
              @mouseleave="mouseleaveWeatherItem(index)"
            >
              <h5>{{ item.week }}</h5>
              <weather-icon :weatherType="item.type_img"></weather-icon>
              <h5>
                <span>{{ item.low }}°</span>
                <span style="color: #00ffa7;"> {{ item.high }}°</span>
              </h5>
            </li>
          </ul>
        </div>
      </div>
      <weather-background v-if="forecast" :weatherType="forecast[currentIndex].type_img"></weather-background>
    </div>
    <p v-else style="padding: 0 10px;margin: 10px 0;">网络错误</p>
  </div>
</template>

<script>
import { formatDate } from '@/common/utils.js';
import { requestWeather } from '@/network/weather.js';

import CitySelect from '../citySelect/CitySelect.vue';

import WeatherAqi from './WeatherAqi.vue';
import WeatherBackground from './WeatherBackground.vue';
import WeatherIcon from './WeatherIcon.vue';
export default {
  name: '',
  data() {
    return {
      isSwitch: false,
      isShow: true,
      cityInfo: {
        province: '北京',
        city: '北京',
        county: '北京',
        code: '101010100',
      },
      forecast: null,
      currentIndex: 0,
    };
  },
  created() {
    this.cityInfo = this.db('user')
      .get('cityInfo')
      .value();
    this.requestWeather(this.cityInfo.code);
  },
  computed: {
    // 把24小时制站成12小时制
    showHour12Time() {
      let str = new Date(this.forecast[0].updateTime).toLocaleString();
      return str.substring(str.indexOf(' ') + 1, str.length - 3);
    },
    cityList() {
      return [this.cityInfo.province, this.cityInfo.city, this.cityInfo.county];
    },
  },
  components: { WeatherAqi, WeatherBackground, CitySelect, WeatherIcon },
  methods: {
    /**
     * 事件
     */
    citySelectResult(cityInfo) {
      this.isSwitch = false;
      if (cityInfo) {
        this.cityInfo = cityInfo;
        this.db('user')
          .assign({ cityInfo: cityInfo })
          .write();
      }
      this.requestWeather(this.cityInfo.code);
    },
    switchAddress(e) {
      this.isSwitch = !this.isSwitch;
    },
    mouseenterWeatherItem(index) {
      this.currentIndex = index;
    },
    mouseleaveWeatherItem(index) {
      this.currentIndex = 0;
    },
    /**
     * 请求和处理数据
     */
    requestWeather(areaid) {
      requestWeather(areaid)
        .then((res) => {
          console.log(res);
          if (res) {
            if (/^https:\/\/tianqiapi.com.+/.test(res.config.url)) {
              let data = res.data.data.slice(0, 4);
              let forecast = data.map((item, index) => {
                return {
                  date: formatDate(new Date(item.date), 'MM月dd日'),
                  week: item.week.replace('星期', '周'),
                  high: item.tem1,
                  low: item.tem2,
                  type: item.wea,
                  type_img: item.wea_img,
                  wind: item.win[0] + item.win_speed,
                  aqi: item.air,
                };
              });
              forecast[0].wendu = data[0].tem;
              forecast[0].updateTime = res.data.update_time;
              this.forecast = forecast;
            } else {
              let data = res.data.data.forecast.slice(0, 4);
              let forecast = data.map((item, index) => {
                return {
                  date: formatDate(new Date(item.ymd), 'MM月dd日'),
                  week: item.week.replace('星期', '周'),
                  high: item.high.substring(3, item.high.length - 1),
                  low: item.low.substring(3, item.low.length - 1),
                  type: item.type,
                  type_img: item.type,
                  wind: item.fx + item.fl,
                  aqi: item.aqi,
                };
              });
              forecast[0].wendu = res.data.data.wendu;
              forecast[0].updateTime = formatDate(new Date(), 'yyyy-MM-dd') + ' ' + res.data.cityInfo.updateTime;
              this.forecast = forecast;
            }
            this.isShow = true;
          } else {
            this.isShow = false;
          }
        })
        .catch((err) => {
          console.log(err);
          this.isShow = false;
        });
    },
  },
};
</script>

<style scoped>
.weather {
  border-radius: 10px;
  overflow: hidden;
  background: -webkit-linear-gradient(top, rgb(13, 104, 188), rgb(114, 173, 224));
}
.weather-content {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  color: #fff;
  padding: 10px;
  position: relative;
  z-index: 1;
}
/* 天气基本信息 */
.weather-info-top {
  font-size: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.weather-info-botom {
  display: flex;
  height: 60px;
  padding: 10px 0;
  justify-content: space-between;
  align-items: center;
}
.weather-info-left {
  display: flex;
  align-items: flex-start;
  font-size: 12px;
}
.weather-info-right {
  font-size: 12px;
}
.weather-city-select {
  border-radius: 8px;
  position: absolute;
  z-index: 2;
  top: 30px;
  left: 10px;
  right: 10px;
  background: #fff;
  padding: 10px 15px;
}
.info-date {
  color: #fff;
  user-select: text;
}
.info-wendu {
  font-size: 28px;
  font-weight: 500;
  margin-right: 8px;
}
.info-type {
  font-size: 14px;
  user-select: text;
}
.info-time {
  color: #ff8700;
  border-radius: 4px;
  background: #fff;
  padding: 4px 8px;
}
.info-wind {
  color: rgba(255, 255, 255, 0.8);
  margin-top: 4px;
  user-select: text;
}
/* 未来天气列表 */
.future-weather-list {
  border-top: 1px solid #fff;
  border-bottom: 1px solid #fff;
}
.weather-list {
  display: flex;
  flex-wrap: nowrap;
  list-style: none;
  overflow: hidden;
}
.weather-list li {
  flex: 1;
  padding: 10px 0;
  text-align: center;
}
.weather-list li:hover {
  background: rgba(255, 255, 255, 0.2);
}
</style>
